import React from 'react';
import _ from 'lodash';

export default class LeftMenu extends React.Component {
  constructor(props) {
    super(...props);

    this.state = {
      list: props.data && props.data.subList,
      title: props.data && props.data.title,
      sum: props.data && props.data.sum
    };
  }

  checkItem(index) {
    let {
      state: {
        list = []
      }
    } = this;
    let cloneList = _.cloneDeep(list);

    cloneList[index].active = !cloneList[index].active;
    this.setState({
      list: cloneList
    });
  }

  checkStatus(is) {
    let mapList = this.state.list.map( item => {
      item.active = is;
      return item;
    });

    this.setState({
      list: mapList,
      active: is
    });
  }

  checkAll() {
    this.checkStatus(!this.state.active);
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.clear) {
      this.checkStatus(false);
    }
  }

  render() {
    let {
      state: {
        list = [],
        title,
        sum,
        active
      }
    } = this;

    return (
      <div className="checkbox-panel">
        <p
            className="checkbox-title"
            onClick={() => {
                this.checkAll()
            }}
        >
          <span className="checkbox-icon">
            {
              !active || <i className="fa fa-check" />
            }
          </span>
          {title}
          <span className="checkbox-title-num">
            {sum}
          </span>
        </p>
        <ul className="checkbox-item">
          {
            list.map((item, keys) => {
              return (
                <li
                    key={keys}
                    onClick={() => {
                        this.checkItem(keys)
                    }}
                >
                  <span className="checkbox-icon">
                    {
                      !item.active || <i className="fa fa-check" />
                    }
                  </span>
                  { item.name }
                  <span className="checkbox-item-num">
                    { item.num }
                  </span>
                </li>
              )
            })
          }

        </ul>
      </div>
    );
  }
}
